<script lang="ts">
import {defineComponent, PropType} from 'vue'
import CacheImg from "@/components/CacheImg/index.vue";
import VirtualScroller from "@/components/VirtualScroller/VirtualScroller.vue";

export default defineComponent({
  name: "NavBar",
  components: {VirtualScroller, CacheImg},
  props: {
    imgsList: { // 图片的url列表
      type:Array as PropType<string[]>,
      default: ()=>[]
    },
    showIndex: {
      type: Number,
      default: ()=>0
    }
  },
  emits:['imgDivClick','update:showIndex'],
  watch: {
    showIndex() {
      this.scrollIntoView(this.showIndex)
    }
  },
  mounted() {
    this.scrollIntoView(this.showIndex)
  },
  methods: {
    scrollIntoView(index:number) {
      this.$refs.virtListRef.scrollIntoView(index)
    },
    imgDivClick(item,index){
      this.$emit('update:showIndex',index)
      this.$emit('imgDivClick',item,index)
      this.scrollIntoView(index)
    },
  }
})
</script>

<template>
  <div class="navbar" @mousemove.prevent @click.stop>
    <VirtualScroller
      :list="imgsList.map(i=>{
          return {id: i}
        })"
      ref="virtListRef"
      :minSize="60"
      fixed
      horizontal
      itemKey="id"
      :buffer="10"
    >
      <template #default="{ itemData: {id: item}, index }">
        <div
          :key="item + index"
          class="imgdiv"
          :class="{imgActiveDiv: showIndex === index}"
          @click="imgDivClick(item,index)"
        >
          <CacheImg
            :src="item"
            loading="lazy"
            @mousemove.prevent
            alt=""/>
        </div>
      </template>
    </VirtualScroller>
  </div>
</template>

<style scoped lang="scss">
.navbar{
  height: 80px;
  .imgdiv{
    opacity: 0.5;
    cursor: pointer;
    height: 80px;
  }
  .imgActiveDiv{
    opacity: unset;
  }
  img{
    height: 80px;
    width: 60px;
    object-fit: fill;
  }
}
</style>
